<template>
    <el-table :data="list" style="width: 100%;padding-top: 15px;">
      <el-table-column label="Order_No" min-width="200" align="center">
        <template slot-scope="scope">
            <span class="mr-1">[{{ scope.row.announcementStatus }}]</span>
        <span class="mr-1">|</span>
        <div class="title flex-1">{{ scope.row.announcementName }}</div>
        </template>
      </el-table-column>
      <el-table-column label="Price" width="195" align="center">
        <template slot-scope="scope">
            {{ scope.row.createdTime}}
        </template>
      </el-table-column>
    </el-table>
  </template>
  
  <script>
import { fetchAnnouncementList } from "@/api/announcement";
  
  export default {
    data() {
    return {
      listLoading: true,
      announcements: [],
    };
  },
  created() {
    this.getList();
  },
    methods: {
    getList() {
      this.listLoading = true;
      fetchAnnouncementList().then((res) => {
        const dataList = res.data.length > 8 ? res.data.slice(0, 7) : res.data;
        const top = [];
        const normal = [];
        dataList.forEach((item) => {
          if (item.announcementStatus === "置顶") {
            top.push();
          } else {
            normal.push(item);
          }
        });
        this.announcements = [...top, ...normal];
        this.listLoading = false;
      });
    },
  },
  }
  </script>
  